<template>
  <div class="auto-image-container">
    <img :src="image"
         alt=""
         class="auto-image"
         @click="showViewer" />
    <!-- 点击操作图片模态框  viewer-fade viewer-transition" :class="isShow?'viewer-in':'viewer-hide' -->
    <transition name="fade">
      <div v-if="isShow"
           style="z-index: 99999999"
           class="auto-viewer-container auto-viewer-fixed auto-viewer-backdrop">
        <div class="auto-viewer-canvas">
          <img id="viewer-img"
               :src="image"
               ref="rotate"
               crossorigin="anonymous"
               alt="" />
        </div>
        <!-- footer操作按钮集合 -->
        <div class="auto-viewer-footer">
          <div class="auto-viewer-toolbar">
            <ul>
              <li @click="rotate(0)"
                  title="向左旋转"><i class="el-icon-refresh-left"></i></li>
              <li @click="save"
                  title="保存"><i class="el-icon-upload2"></i></li>
              <li @click="rotate(1)"
                  title="向右旋转"><i class="el-icon-refresh-right"></i></li>
            </ul>
          </div>
        </div>
        <!-- 关闭模态框按钮 -->
        <div class="auto-viewer-button auto-viewer-close"
             @click="hiddenViewer"></div>
      </div>
    </transition>
    <!-- 点击操作图片模态框 -->

    <!-- <img v-show="img"
         class="successimg"
         :src="img"
         alt="" /> -->
  </div>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
import html2canvas from 'html2canvas'
@Component({
  name: 'viewImg'
})
export default class extends Vue {
  @Prop({ type: String, required: true, default: '' }) private image!: ''
  private isShow = false
  private deg = 0
  private img = ''
  private url = ''

  showViewer () {
    this.isShow = true
  }

  hiddenViewer () {
    this.isShow = false
    this.deg = 0
  }

  rotate (num: number) {
    if (num === 0) {
      this.deg -= 90
    } else {
      this.deg += 90
    }
    (this.$refs.rotate as HTMLElement).style.transform = `rotate(${this.deg}deg)`
  }

  // 保存操作后的图片
  save () {
    html2canvas((this.$refs.rotate as HTMLElement), {
      useCORS: true,
      allowTaint: true
    }).then((canvas: any) => {
      const url = canvas.toDataURL()
      this.img = url
      this.hiddenViewer()
      const type = this.getFileType(url)
      this.url = url.replace(`data:${type};base64,`, '')
      const blob = this.b64toBlob(this.url, type)
      const formData = new FormData()
      formData.append('file', blob)
      this.transferData(url, formData)
    })
  }

  @Emit('transferData')
  transferData (url: string, file: any) {
    const obj = {
      url,
      formData: file
    }
    return obj
  }

  // 获取base64图片格式
  getFileType (url: string) {
    let head = url.split(',')[0]
    head = head.replace('data:', '')
    const type = head.replace(';base64', '')
    return type
  }

  // 将base64位转换成blob
  b64toBlob (b64Data: string, contentType: string, sliceSize?: number) {
    contentType = contentType || ''
    sliceSize = sliceSize || 512

    var byteCharacters = atob(b64Data) // 对base64字符串进行解码
    var byteArrays = []

    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
      var slice = byteCharacters.slice(offset, offset + sliceSize)

      var byteNumbers = new Array(slice.length)
      for (var i = 0; i < slice.length; i++) {
        // charCodeAt(i)返回指定位置的字符i的Unicode编码，返回值是 0 - 65535 之间的整数
        byteNumbers[i] = slice.charCodeAt(i)
      }
      var byteArray = new Uint8Array(byteNumbers)

      byteArrays.push(byteArray)
    }
    var blob = new Blob(byteArrays, { type: contentType })
    return blob
  }
}
</script>

<style scoped>
.auto-image {
  cursor: pointer;
  display: inline-block;
}
.auto-viewer-container {
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  overflow: hidden;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.auto-viewer-fixed {
  position: fixed;
}
.auto-viewer-backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

.auto-viewer-canvas {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.auto-viewer-canvas > img {
  height: auto;
  width: auto;
  max-width: 90% !important;
  /* transition: 0.5s all linear; */
}
.auto-viewer-button {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  cursor: pointer;
  height: 80px;
  width: 80px;
  overflow: hidden;
  position: absolute;
  right: -40px;
  top: -40px;
}
.auto-viewer-close::before {
  position: absolute;
  font-family: element-icons !important;
  content: '\e6db';
  bottom: 15px;
  left: 15px;
  color: #fff;
}
.auto-viewer-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  text-align: center;
}
.auto-viewer-toolbar {
  margin: 20px 0;
}
.auto-viewer-toolbar > ul {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 6px 3px;
}
.auto-viewer-toolbar > ul li {
  border-radius: 50%;
  cursor: pointer;
  width: 24px;
  height: 24px;
  line-height: 25px;
  text-align: center;
  overflow: hidden;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  margin: 2px;
}
</style>
